<script setup>
import { BQGIS_initCurtain } from '../../../static/CIM/BQGIS-curtain'
import { ref, onMounted } from "vue"
import { ElMessageBox, ElMessage } from 'element-plus'
import { pickPostion } from "../../../static/CIM/BQGIS-Pick"

let curtain = null    // 获取图像融合(幕布)实例
let dialogType = ref()  // 添加/更新弹窗
let listData = ref([])       // 视频列表数据
const formData = ref(null)

onMounted(() => {
    curtain = BQGIS_initCurtain(viewer)
})

// 生成图像id
const guid = () => {
    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function (c) {
            var r = (Math.random() * 16) | 0,
                v = c == "x" ? r : (r & 0x3) | 0x8
            return v.toString(16)
        }
    )
}
// 添加图像
const addCurtain = () => {
    curtain.addCurtain(formData.value,
        // 回调函数获取选中图像信息
        (picture) => {
            let message = {
                type: picture.type,
                position: picture.position,
            }
            ElMessageBox.alert(message, '图像信息')
        })
    listData.value.push(formData.value)
    formData.value = null
}
// 更新图像
const updateCurtain = () => {
    curtain.updateCurtain(formData.value)
    let index = listData.value.findIndex(item => item.keyId == formData.value.keyId)  //更新列表信息
    listData.value.splice(index, 1, formData.value)
}
// 打开添加图像页面
const openAddDialog = () => {
    dialogType.value = 'add'
    formData.value = {
        id: guid(), // 有接口时，应先请求添加，然后将返回的弹窗(投影)id填入
        title: '添加幕布',
        url: '../../../public/video/videoFusion.mp4',//图像url
        name: '',
        keyId: guid(),
        fov: 46.3,          //angle 水平张角
        aspectRatio: 15.5,  //angle2 垂直张角
        dis: 500000,        //distance 视距
        azimuth: 178,       //heading 方位角178.5
        pitchAngel: 8,      //pitch 俯仰角8.2
        frustumShow: true,  //showFrustum 是否显示方框线
        rotateDeg: 5,       //stRotationDegree 视频或图片旋转角度5
    }
}
// 打开更新图像页面并赋值
const openUpdateDialog = (data) => {
    dialogType.value = 'update'
    formData.value = { ...data }
    formData.value.lng = data.position[0]
    formData.value.lat = data.position[1]
    formData.value.alt = data.position[2]
}
// 飞向图像视角：有bug
const flyById = (id) => {
    const graphic = curtain.graphicLayer.getGraphicById(id)
    console.log("id:", id, "graphic:", graphic)
    if (graphic) {
        graphic.flyTo({ radius: 300 })
    }
}
// 删除指定图像
const deleteVideoCurtain = (item, index) => {
    console.log("item:", item, "index:", index)
    curtain.deleteCurtain(item)
    listData.value.splice(index, 1)
}
//选取坐标
function selPosition() {
    pickPostion().then(({ lngLatPoint, position }) => {
        formData.value.lng = lngLatPoint[0];
        formData.value.lat = lngLatPoint[1];
        formData.value.alt = lngLatPoint[2];
    });
}
function validate () {
  if(!formData.value.lng || formData.value.lng < -180 || formData.value.lng > 180){
      ElMessage({
        message: '请输入合法的经度，经度范围为 -180 ~ 180',
        type: 'warning',
      })
      return false
  }
  if(!formData.value.lng || formData.value.lat < -90 || formData.value.lat > 90){
      ElMessage({
        message: '请输入合法的纬度，纬度范围为 -90 ~ 90',
        type: 'warning',
      })
      return false
  }
  if(!(formData.value.fov && formData.value.fov % 90 !== 0)){
      ElMessage({
        message: '请输入合法的水平张角，水平张角不能为0，不能为90的倍数',
        type: 'warning',
      })
      return false
  }
  return true
}
// 保存：添加或更新
function saveCurtain() {
    console.log("type:", dialogType.value)
    for (let key in formData.value) {
        if (
            [
                "lng",
                "lat",
                "alt",
                "angle",
                "angle2",
                "distance",
                "heading",
                "pitch",
                "roll"
            ].indexOf(key) !== -1
        ) {
            formData.value[key] = Number(formData.value[key]);
        }
    }
    if(!validate()) return
    const { lng, lat, alt } = formData.value;
    formData.value.position = [lng, lat, alt].map(item => Number(item));
    if (dialogType.value === 'add') {
        addCurtain()
    } else if (dialogType.value === 'edit') {
        updateCurtain()
    }
}

</script>

<template>
    <div class="surveillance">
    </div>
</template>

<style lang="scss" scoped>
.surveillance {
    width: 250px;
    height: 300px;
    position: absolute;
    left: 17px;
    top: 120px;
    border-radius: 10px;
    padding: 10px;
}
</style>